<template>
  <div class="canvas">
    <div class="topBox">
      <a class="btn-black">返回店铺</a>
      <ul>
        <li
          v-for="(item, index) in deviceList"
          :key="index"
          @click="toggleDevice(item.id)"
          :class="{ on: terminal == item.id }"
        >
          <i class="iconfont" :class="'icon-' + item.name"></i>
        </li>
      </ul>
      <el-button class="btn-save" type="primary" @click="canvasSave"
        >保存画布</el-button
      >
    </div>
    <div class="bottomWarp">
      <div class="leftBox">
        <left-bar></left-bar>
      </div>
      <div class="mainContentWarp">
        <div class="mainContent" :class="'view-' + terminal">
          <cereshop-layout :terminal="terminal"></cereshop-layout>
        </div>
      </div>
      <div class="RightBox">
        <tool-panel></tool-panel>
      </div>
    </div>
  </div>
</template>

<script>
import leftBar from '../components/leftBar/panel.vue'
import toolPanel from '../components/rootcompToolbar/toolPanel'
import CereshopLayout from '../components/canvasEditPage'
import { mapGetters, mapMutations } from 'vuex'
import api from '@/api'
import { listSearchMixin } from '@/config/mixin'
import { addSmsStoreCanvas, getSmsStoreCanvas } from "@/api/sms/SmsStoreCanvas";


export default {
  name: 'canvasContainer',
  mixins: [listSearchMixin],
  components: {
    CereshopLayout,
    leftBar,
    toolPanel
  },
  data () {
    return {
      deviceList: [

        {
          id: 3,
          name: 'phone'
        }
      ],
      storeId:0,
      canvasId: null
    }
  },
  computed: {
    ...mapGetters(['terminal', 'componentsData'])
  },
  mounted () {
    this.canvasGet()
  },
  methods: {
    ...mapMutations({
      setTerminal: 'SET_TERMINAL',
      setComponentsData: 'SET_COMPONENTSDATA'
    }),
    toggleDevice (id) {
      this.setTerminal(id)
      this.canvasGet()
    },
    // 保存画布
    canvasSave () {
      // 删除非必要的字符
      let cloneComponentsData = JSON.parse(JSON.stringify(this.componentsData))
      for (let i = 0; i < cloneComponentsData.length; i++) {
        delete cloneComponentsData[i].icon
        delete cloneComponentsData[i].iconH
        if (cloneComponentsData[i].type === 'productList') {
          cloneComponentsData[i].componentContent.imgTextData = []
        }
      }
      var paramsData = {
        storeId:this.storeId,
        terminal: this.terminal,
        json: JSON.stringify(cloneComponentsData),
        name: '1'
      }
      if (this.canvasId) {
        paramsData.canvasId = this.canvasId
      }
      console.log(paramsData)

       addSmsStoreCanvas(paramsData).then(res => {
       console.log(res)
                    this.isProcess = false;
                     if (res.code == 200) {
                      this.$message({
                        type: 'success',
                        message: '保存成功!'
                      });

                    } else {
                      this.$message({
                        message: '未知错误',
                        type: 'error'
                      })
                    }
                  })
     // this.sendReq(params, (res) => {
     //   this.$message({
     //     message: '保存成功！',
     //     type: 'success'
    //    })
     // })
    },
    // 读取画布
    canvasGet1 () {
      var _this = this
      let params = {
        url: api.getCanvas ,
        method: 'GET'
      }
      this.sendReq(params, (res) => {
      console.log(componentsData)
        if (JSON.stringify(res.data) !== '{}') {
          this.canvasId = res.data.canvasId
          var componentsData = JSON.parse(res.data.json)
           console.log(componentsData)
          for (let i = 0; i < componentsData.length; i++) {
            if (componentsData[i].type === 'productList') {
              if (componentsData[i].componentContent.categoryId) {
                _this.sendReq(
                  {
                    url: `${api.getProducts}?page=1&pageSize=20&classifyId=${componentsData[i].componentContent.categoryId}`,
                    method: 'GET'
                  },
                  (proRes) => {
                    componentsData[i].componentContent.imgTextData =
                      proRes.list
                  }
                )
              }
            }
          }
          console.log(componentsData)
          _this.setComponentsData(componentsData)
        } else {
          _this.setComponentsData([])
        }

      })
    },
    canvasGet () {
          var _this = this
          getSmsStoreCanvas(1).then(response => {
                  if (JSON.stringify(response.data) !== '{}') {
                            this.canvasId = response.data.canvasId
                            this.storeId = response.data.storeId
                            var componentsData = JSON.parse(response.data.json)
                            for (let i = 0; i < componentsData.length; i++) {
                              if (componentsData[i].type === 'productList') {
                                if (componentsData[i].componentContent.categoryId) {
                                  _this.sendReq(
                                    {
                                      url: `${api.getProducts}?page=1&pageSize=20&classifyId=${componentsData[i].componentContent.categoryId}`,
                                      method: 'GET'
                                    },
                                    (proRes) => {
                                      componentsData[i].componentContent.imgTextData =
                                        proRes.list
                                    }
                                  )
                                }
                              }
                            }
                            _this.setComponentsData(componentsData)
                          } else {
                            _this.setComponentsData([])
                          }

                });

        }
  }
}
</script>

<style lang="scss" scoped>
.canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  .topBox {
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid #f0f3f4;
    position: relative;
    display: flex;
    justify-content: center;
    .btn-black {
      position: absolute;
      left: 20px;
      top: 0;
    }
    li {
      width: 56px;
      height: 52px;
      cursor: pointer;
      text-align: center;
      display: inline-block;
      .iconfont {
        font-size: 24px;
      }
      &:hover,
      &.on {
        background-color: #FF7800;
        color: #fff;
      }
    }
    .btn-save {
      position: absolute;
      right: 20px;
      top: 5px;
    }
  }
  .bottomWarp {
    flex: 1;
    display: flex;
    height: 0;
  }
  .leftBox {
    height: 100%;
  }
  .mainContentWarp {
    background-color: #f0f3f4;
    overflow: auto;
    height: 100%;
    flex: 1;
    .mainContent {
      margin: 0 auto;
      max-width: 100%;
      width: 500px;
      &.view-4 {
        width: 1200px;
      }
    }
  }
  .RightBox {
    height: 100%;
    overflow: auto;
  }
}
</style>
